<template>
  <uni-popup ref="dialogRef" type="dialog" class="popup-user">
    <view class="box-wrap">
      <view class="title-wrap">请选择您的登录账号</view>
      <view class="info-wrap">
        <view
          v-for="(item, index) in data.list"
          :key="index"
          class="item-wrap"
          :class="{ 'item-top': index === 0 }"
          @tap="tapSelect(index)">
          <view class="iconfont icon-user"></view>
          <view class="text" :class="{ text1: data.select === index }">
            {{ item.accountNumber }}
          </view>
          <view
            class="iconfont icon-select"
            :class="{ 'select-show': data.select === index }"></view>
        </view>
      </view>
      <view class="btn-wrap">
        <button class="btn btn1" @tap="hide">取消</button>
        <button class="btn btn2" @tap="tapConfirm">确认</button>
      </view>
    </view>
  </uni-popup>
</template>

<script lang="ts" setup>
import { loginCheck } from '@/service/apis/login';
import { setToken, setUserId, setOpenId, setMoreCharge } from '@/mixins/info';
import { uniLogin } from '@/utils/api';
import { backPage } from '@/utils/util';

const data = reactive({
  list: [] as any,
  page: '',
  select: -1,
});

const dialogRef = ref();

const show = (arr: any, page: string) => {
  dialogRef.value?.open();
  data.page = page;
  data.list = arr || [];
  if (data.list.length == 1) {
    data.select = 0;
  }
};
const hide = () => {
  dialogRef.value?.close();
};

const tapSelect = (inx: number) => {
  data.select = inx;
};

const tapConfirm = async () => {
  if (data.select < 0) {
    return;
  }
  const obj = data.list[data.select];
  const jscode = await uniLogin('weixin');
  obj.jsCode = jscode;
  loginCheck(obj).then((res: any) => {
    setToken(res[0].token);
    setUserId(res[0].userId);
    setOpenId(res[0].openId);
    setMoreCharge(res[0].moreCharging);
    hide();
    backPage(data.page);
  });
};

defineExpose({
  show,
  hide,
});
</script>

<style lang="scss">
@import './index.scss';
</style>
